<script setup lang="ts" name="authAgreement">
import {ref, onMounted, reactive} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useUsersApi } from "/src/api/users";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(0),
		secondName: ref(''),
		thirdName: ref('实名认证服务协议')
	},
	userInfo: {},
	platformData: [
		{name: '我的信息', path: '/mine'},
		{name: '收款账号', path: '/mine/payee_account'},
		{name: '注销账户', path: '/mine/cancel_account'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader second-url="/mine" :second-name="lxsAppData.tab.secondName" :third-name="lxsAppData.tab.thirdName" />

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">
					<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/%E5%AE%9E%E5%90%8D%E8%AE%A4%E8%AF%81%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.png" alt="">
				</el-card>

			</div>

		</div>

	</div>
</template>

<style scoped lang="scss">
.layout-padding-auto {
	display: flex;
	flex-direction: column;
	align-items: center;

	img {
		width: 100%;
	}
}
</style>